{% extends 'base.html' %}
{% load static %}

{% block title %}用户列表 - 开始对话{% endblock %}

{% block extra_css %}
<style>
    .user-list {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
    }
    
    .user-card {
        background: #fff;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        margin-bottom: 15px;
        padding: 20px;
        transition: all 0.3s ease;
        cursor: pointer;
    }
    
    .user-card:hover {
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        transform: translateY(-2px);
    }
    
    .user-info {
        display: flex;
        align-items: center;
    }
    
    .user-avatar {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        margin-right: 20px;
        object-fit: cover;
    }
    
    .user-details {
        flex: 1;
    }
    
    .user-name {
        font-size: 18px;
        font-weight: 600;
        color: #333;
        margin: 0 0 5px 0;
    }
    
    .user-signature {
        color: #666;
        font-size: 14px;
        margin: 0 0 10px 0;
    }
    
    .user-interests {
        color: #999;
        font-size: 12px;
        margin: 0;
    }
    
    .start-chat-btn {
        background: #007bff;
        color: white;
        border: none;
        padding: 8px 16px;
        border-radius: 5px;
        cursor: pointer;
        transition: background 0.3s ease;
    }
    
    .start-chat-btn:hover {
        background: #0056b3;
    }
    
    .search-box {
        margin-bottom: 30px;
    }
    
    .search-input {
        width: 100%;
        padding: 12px 20px;
        border: 1px solid #ddd;
        border-radius: 25px;
        font-size: 16px;
        outline: none;
    }
    
    .search-input:focus {
        border-color: #007bff;
    }
    
    .empty-state {
        text-align: center;
        padding: 60px 20px;
        color: #999;
    }
    
    .empty-state i {
        font-size: 48px;
        margin-bottom: 20px;
        color: #ddd;
    }
</style>
{% endblock %}

{% block content %}
<div class="user-list">
    <div class="page-header mb-4">
        <h2>用户列表</h2>
        <p class="text-muted">选择用户开始新的对话</p>
    </div>
    
    <div class="search-box">
        <input type="text" class="search-input" id="user-search" placeholder="搜索用户...">
    </div>
    
    {% if users %}
        <div id="user-list">
            {% for user in users %}
                <div class="user-card" data-user-id="{{ user.id }}" data-user-name="{{ user.nickname|default:user.username }}">
                    <div class="user-info">
                        <img src="{% if user.avatar %}{{ user.avatar.url }}{% else %}{% static 'images/default-avatar.png' %}{% endif %}" 
                             alt="{{ user.nickname }}" 
                             class="user-avatar">
                        <div class="user-details">
                            <h3 class="user-name">{{ user.nickname|default:user.username }}</h3>
                            {% if user.signature %}
                                <p class="user-signature">{{ user.signature }}</p>
                            {% endif %}
                            {% if user.interests %}
                                <p class="user-interests">兴趣: {{ user.interests }}</p>
                            {% endif %}
                        </div>
                        <button class="start-chat-btn" onclick="startChat({{ user.id }})">
                            开始对话
                        </button>
                    </div>
                </div>
            {% endfor %}
        </div>
    {% else %}
        <div class="empty-state">
            <i class="fas fa-users"></i>
            <h3>暂无其他用户</h3>
            <p>系统中还没有其他用户</p>
        </div>
    {% endif %}
</div>

<script>
// 用户搜索功能
document.getElementById('user-search').addEventListener('input', function(e) {
    const searchTerm = e.target.value.toLowerCase();
    const userCards = document.querySelectorAll('.user-card');
    
    userCards.forEach(card => {
        const userName = card.getAttribute('data-user-name').toLowerCase();
        if (userName.includes(searchTerm)) {
            card.style.display = 'block';
        } else {
            card.style.display = 'none';
        }
    });
});

// 开始对话
function startChat(userId) {
    window.location.href = `/social/conversations/start/${userId}/`;
}
</script>
{% endblock %}
